<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="标题">
      <el-input v-model="form.title"></el-input>
    </el-form-item>

    <!-- 副文本内容的配置
      v-model 是我们副文本的内容
      editorToolbar 工具栏配置
      useCustomImageHandler 是布尔值,如果是true,就可以自定义上传图片的方法
      @image-added="imgUpload" 监听一个事件,调用一个函数进行图片上传
      发送 ajax 请求
    -->
    <el-form-item label="内容">
      <vue-editor
        :useCustomImageHandler="true"
        @image-added="imgUpload"
        v-model="form.content"
        :editorToolbar="customToolbar"
      ></vue-editor>
    </el-form-item>

    <el-form-item label="栏目">
      <el-checkbox-group v-model="form.categories">
        <!-- 我们不仅仅需要一个中文
                我们的分类其实是有 名字 name, id
                我们的 lable 应该是我们分类的 id
        而将分类的名字作为内容渲染出来 使用 {{.name}}-->
        <!-- <el-checkbox label="id">name</el-checkbox> -->
        <!-- 我们需要使用 ajax 获取分类数据然后 遍历渲染出这些选项 -->
        <el-checkbox
          v-for="(item, index) in categoryList"
          :key="index"
          :label="item.id"
        >{{item.name}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="封面">
      <!-- 这个组件直接将我们上传图片的工作接管
          action 使我们上传图片的接口路径
          on-remove 当我们删除一个图片的时候会触发 
          headers 使我们要带上请求时验证的 token
          这里在模板当中是没有办法直接获取我们的 localStorage 的
      需要现在 data 当中定义这个 token 这里在赋值-->
      <el-upload
        :file-list="form.cover"
        :action="$axios.defaults.baseURL + '/upload/'"
        list-type="picture-card"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :headers="{Authorization:token}"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </el-form-item>

    <el-form-item label="类型">
      <el-radio-group v-model="form.type">
        <el-radio :label="1">文章</el-radio>
        <el-radio :label="2">视频</el-radio>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// 导入副文本框插件
import { VueEditor } from "vue2-editor";
export default {
  // 注册副文本框组件
  components: {
    VueEditor
  },
  data() {
    return {
      // 获取传递进来的文章id
      postId: this.$route.query.id,
      token: localStorage.getItem("token"),
      form: {
        // 对于新建的文章这里应该是控制,但是如果是编辑文章,就应该用ajax获取文章数据来填写这些内容
        title: "",
        // 这里是编辑的时候,用户选中的分类
        categories: [],
        type: 1,
        content: "",
        cover: []
      },
      // 所有分类选择   这个是页面一加载就会全部全部显示出来,只是给用户去选择
      categoryList: [],
      customToolbar: [
        ["bold", "italic", "underline"],
        [{ list: "ordered" }, { list: "bullet" }],
        ["image", "code-block"]
      ]
    };
  },
  mounted() {
    // 获取分类数据渲染多选框
    this.$axios({
      url: "/category",
      method: "get"
    }).then(res => {
      const { data } = res.data;
      // 这里我们数据带有关注和头条分类,但是这两个分类不需要我们手动设置
      // 我们需要过滤掉这两个分类
      const newCategoryList = [];
      data.forEach(element => {
        if (element.id != 0 && element.id != 999) {
          newCategoryList.push(element);
        }
      });
      this.categoryList = newCategoryList;
    });
    // 如果能够拿到 this.postId 证明我们是在编辑文章,
    // 我已应该使用 ajax 获取文章数据
    if (this.postId) {
      this.$axios({
        url: "/post/" + this.postId,
        method: "get"
      }).then(res => {
        const { data } = res.data;
        console.log(data);
        // 处理我们的 categories 数据
        // 将 [{id:1}] 改成 [1]
        let newCategoryList = [];
        data.categories.forEach(element => {
          newCategoryList.push(element.id);
        });
        data.categories = newCategoryList;
        data.cover.forEach((element, index) => {
          // 其中 element.url 是不完整的图片地址
          element.url = this.$fixImgUrl(element.url);
          element.uid = index;
        });
        // 如果是历史遗留数据, 带有 div 标签
        // 富文本框不能接受,就要使用 正则表达式来替换 div 为 p
        data.content = data.content.replace(/div/g, "p");
        this.form = data;
      });
    }
  },
  methods: {
    onSubmit() {
      //  转换 form.categories 成 api 文档需要的格式
      const newArr = [];
      this.form.categories.forEach(element => {
        newArr.push({
          id: element
        });
      });
      this.form.categories = newArr;

      console.log(this.form);
      // 发送 ajax 请求发布文章
      this.$axios({
        url: this.postId ? "/post_update/" + this.postId : "/post",
        method: "post",
        data: this.form
      }).then(res => {
        const { data } = res.data;
        console.log(data);
      });
    },

    // 这里是副文本添加图片触发的函数
    imgUpload(file, Editor, cursorLocation, resetUploader) {
      // 这4个参数是组件定义的
      // file 是我们要上传的文件
      // Editor 是我们正在使用的编辑器
      // cursorLocation 这是子组件获取到的当前光标位置
      // restUploader 这是当你处理完了所有数据,应该重置这个上传的组件

      var formData = new FormData();
      // 根据api文档配置属性名  api文档:file
      formData.append("file", file);
      // 这个数据可以直接作为data 发送 ajax 请求

      this.$axios({
        url: "/upload",
        method: "POST",
        data: formData
      })
        .then(res => {
          console.log(res);
          const { data } = res.data;

          let url = this.$axios.defaults.baseURL + data.url; // Get url from response
          // Editor:编辑器   insertEmbed:内嵌;插入;   cursorLocation:光标位置 url是我们上面传输完图片获取的地址
          // 将传到服务器,返回一个地址的图片放入编辑器当中
          Editor.insertEmbed(cursorLocation, "image", url);
          // 必须要做的就是重置上传组件
          resetUploader();
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleRemove(file, fileList) {
      // 处理封面图插件,删除图片时的函数
      this.form.cover = fileList;
      console.log("删除了图片");
    },
    handleSuccess(res) {
      // this.form.cover.push(res.data.id)
      // 这里不仅能拿到 id 还能拿到 uid 还能拿到我们的 url
      // 直接就可以把它构造成最终 api 需要的格式,
      // 无需等到最终推送的时候再做
      this.form.cover.push({
        id: res.data.id,
        url: this.$axios.defaults.baseURL + res.data.url
      });
      console.log(this.form);
    }
  }
};
</script>

<style>
</style>